<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #operationBeforeExtend="{ record }">
        <a-link
          @click="assignDriver(record)"
          :disabled="record.allocationStatus != '3' || record.weightStatus != 'weightBox'" 
        > 分配司机</a-link>
      </template>
    </ma-crud>

    <a-modal :mask-closable="false"  v-model:visible="visible" :on-before-ok="submitData">
      <template #title>分配司机</template>
      <ma-form v-model="form" :columns="formColumns" ref="formRef" v-if="visible" :options="{
        showButtons: false,
      }">

      </ma-form>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import lzccContainer from '@/api/lzcc/lzccContainer'
import { Message } from '@arco-design/web-vue'
import { Notification } from '@arco-design/web-vue'

import tool from '@/utils/tool'
import * as common from '@/utils/common'

const crudRef = ref()
const formRef = ref()
const visible = ref(false)
const form = ref({})
const row = ref({})

const seeTask = (record) => {

}

const submitData = async () => {
  const valid = await formRef.value.validateForm()
  if (! valid) {
    const res = await lzccContainer.update(row.value.id, Object.assign(row.value, form.value))
    if (res.success) {
      Notification.success('分配成功')
      row.value = {}
      form.value = {}
      visible.value = false
    } else {
      Notification.error(res.message ?? '分配失败')
    }
  }
  return false
}

const assignDriver = (record) => {
  row.value = record
  form.value.companyId = record.companyId
  form.value.driverId = record.driverId
  visible.value = true
}

const formColumns = ref([
  {
    title: '运输公司',
    dataIndex: 'companyId',
    formType: 'select',
    dict: {
      remote: 'lzcc/transitCompany/remote',
      remoteOption: {
        select: ['name as label', 'id as value' ]
      },
    },
    rules: {
      required: true,
      message: "请选择运输公司"
    },
    cascaderItem: ['driverId']
  },
  {
    title: '司机',
    dataIndex: 'driverId',
    formType: 'select',
    dict: {
      url: 'lzcc/driver/linkage',
    },
    rules: {
      required: true,
      message: "请选择司机"
    }
  }
])


const options = reactive({
  id: 'flyos_lzcc_container',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  labelWidth: '120px',
  operationColumn: true,
  operationWidth: 260,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: lzccContainer.getList,
  add: {
    show: true,
    api: lzccContainer.save,
    auth: ['lzcc:container:save']
  },
  edit: {
    show: true,
    api: lzccContainer.update,
    auth: ['lzcc:container:update']
  },
  delete: {
    show: true,
    api: lzccContainer.deletes,
    auth: ['lzcc:container:delete']
  },
  import: {
    show: true,
    url: 'lzcc/container/import',
    templateUrl: 'lzcc/container/downloadTemplate',
    auth: ['lzcc:container:import']
  },
  export: {
    show: true,
    url: 'lzcc/container/export',
    auth: ['lzcc:container:export']
  },
  // 编辑打开弹窗前处理
  beforeOpenEdit: (form) => {
    if (form.weightStatus == 'lightBox') {
      form.lightBoxStatus = form.allocationStatus
    } else {
      form.weightBoxStatus = form.allocationStatus
    }
    return true
  },
  // 编辑保存前处理
  beforeEdit: (form) => {
    if (form.weightStatus == 'lightBox') {
      form.allocationStatus = form.lightBoxStatus
    } else {
      form.allocationStatus = form.weightBoxStatus
    }
    return true
  },
  // 新增保存前处理
  beforeAdd: (form) => {
    if (form.weightStatus == 'lightBox') {
      form.allocationStatus = form.lightBoxStatus
    } else {
      form.allocationStatus = form.weightBoxStatus
    }
    return true
  }
})

const columns = reactive([
  {
    title: "ID",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "箱号",
    dataIndex: "containerNo",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入箱号"
    }
  },
  {
    title: "箱型",
    dataIndex: "containerType",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请输入箱型"
    },
    dict: {
      name: "mbl_type",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    }
  },
  {
    title: "轻重状态",
    dataIndex: "weightStatus",
    formType: "radio",
    search: true,
    commonRules: {
      required: true,
      message: "请输入轻重状态"
    },
    addDefaultValue: 'lightBox',
    control: (value) => {
      if (value == 'lightBox') return {
        weightBoxStatus: { display: false },
        lightBoxStatus: { display: true },
        heavyWeight: {display: false},
        emptyDhWeight: {display: true},
        emptyYhWeight: {display: true},
      }
      else return {
        lightBoxStatus: { display: false },
        weightBoxStatus: { display: true },
        heavyWeight: {display: true},
        emptyDhWeight: {display: false},
        emptyYhWeight: {display: false},
      }
    },
    dict: {
      name: "weightStatus",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    }
  },
  {
    title: "分配状态",
    dataIndex: "allocationStatus",
    addDisplay: false,
    editDisplay: false,
    formType: 'select',
    dict: {
      data: [
          { label: '已回库', value: 1 },
          { label: '待回库', value: 2 },
          { label: '待分配', value: 3 },
          { label: '待装出库', value: 4 },
      ],
      tagColors: { 1: 'cyan', 2: 'blue', 3: 'orange', 4: 'red'},
      translation: true,
    }
  },
  {
    title: "轻箱状态",
    dataIndex: "lightBoxStatus",
    hide: true,
    formType: "radio",
    addDefaultValue: '1',
    dict: {
      name: "lightBox",
      props: {
        label: "title",
        value: "key"
      },
    }
  },
  {
    title: "重箱状态",
    dataIndex: "weightBoxStatus",
    formType: "radio",
    hide: true,
    addDefaultValue: '3',
    dict: {
      name: "weightBox",
      props: {
        label: "title",
        value: "key"
      },
    }
  },
  {
    title: "库位",
    dataIndex: "storageLocation",
    formType: "input"
  },
  {
    title: "当前分配公司",
    dataIndex: "companyId",
    formType:'select',
    dict: {
      remote: 'lzcc/transitCompany/remote',
      remoteOption: {
        select: ['name as label', 'id as value' ]
      },
      translation: true
    },
    addDisplay: false,
    editDisplay: false,
  },
  {
    title: "当前分配司机",
    dataIndex: "driverId",
    formType:'select',
    dict: {
      remote: 'lzcc/driver/remote',
      remoteOption: {
        select: ['name as label', 'id as value' ]
      },
      translation: true
    },
    addDisplay: false,
    editDisplay: false,
  },
  {
    title: "重箱重量",
    dataIndex: "heavyWeight",
    formType: "input",
    hide: true
  },
  {
    title: "轻箱待回重量",
    dataIndex: "emptyDhWeight",
    formType: "input",
    hide: true
  },
  {
    title: "轻箱已回重量",
    dataIndex: "emptyYhWeight",
    formType: "input",
    hide: true
  },
])
</script>
<script> export default { name: 'lzcc:container' } </script>